<template>
  <div class="overview-admin">
    <div class="module-title">
      <div class="line"></div>
      <span class="title">数据概览</span>
      <div class="line"></div>
    </div>
    <ul class="count-list">
      <li class="count-wrap">
        <div class="title">本月销售额</div>
        <div class="number">{{totalAmount}}</div>
      </li>
      <li class="count-wrap">
        <div class="title">本月保底任务</div>
        <div class="number">{{totalTaskAmount}}</div>
      </li>
      <li class="count-wrap">
        <div class="title">本月资源价格</div>
        <div class="number">{{totalAdCost}}</div>
      </li>
      <li class="count-wrap">
        <div class="title">ROI</div>
        <div class="number">{{totalAdCode}}</div>
      </li>
      <li class="count-wrap">
        <div class="title">暂不发货订单金额</div>
        <div class="number">{{delayShipOrderAmount}}</div>
      </li>
      <li class="count-wrap">
        <div class="title">总提成金额</div>
        <div class="number">{{totalBonus}}</div>
      </li>
    </ul>
    <ul class="chart-list">
      <li class="chart">
        <div class="canvas">
          <m-echarts :title="newOrderProcess+'%'" :echarts="echarts" :onInit="initChart3" ref="chart3" canvasId="admin-newOrderProcess" />
        </div>
        <div class="title">新单占比</div>
      </li>
      <li class="chart">
        <div class="canvas">
          <m-echarts :title="taskProcess + '%'"  :echarts="echarts"  :onInit="initChart1"  ref="chart1" canvasId="admin-taskProcess" />
        </div>
        <div class="title">本月完成进度</div>
      </li>
      <li class="chart">
        <div class="canvas">
          <m-echarts :title="timeProcess+'%'" :echarts="echarts" :onInit="initChart2" ref="chart2" canvasId="admin-timeProcess" />
        </div>
        <div class="title">本月时间进度</div>
      </li>
    </ul>
  </div>
</template>

<script>
  import * as echarts from "utils/echarts";
  import mEcharts from "components/echarts";
  import timeFormat from "utils/time-format";

  export default {
    name: 'overviewAdmin',
    data() {
      return {
        echarts,
        financeData: {
          newOrderAmount: 0,
          rebuyOrderAmount: 0,
        },
        totalTaskAmount: 0,
        totalAdCost: 0,
        totalAdCode: 0,
        options1: {},
        options2: {},
        timeProcess: 0,
        taskProcess: 0,
        newOrderProcess: 0,
        totalBonus: 0,
        delayShipOrderAmount: 0,
      };
    },
    computed: {
      totalAmount() {
        return this.financeData.newOrderAmount + this.financeData.rebuyOrderAmount;
      },
    },
    components: {
      mEcharts
    },
    methods: {
      initChart1(canvas, width, height) {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height
        })
        canvas.setChart(chart);
        this.chart1 = chart;
        return chart;
      },
      initChart2(canvas, width, height) {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height
        })
        canvas.setChart(chart);
        const current = new Date();
        const day = current.getDate();
        current.setDate(1);
        current.setMonth(current.getMonth()+1);
        current.setDate(current.getDate()-1)
        this.timeProcess = parseFloat(day/current.getDate()*100).toFixed(1) - 0;
        const options = {
          color: [new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              {offset: 0, color: '#FEC3C3'},
              {offset: 1, color: '#FF8B8C'}
            ]
          ), '#E0E4EB'],
          series: [
            {
              name: '时间进度',
              type: 'pie',
              radius: [ '80%', '100%' ],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [
                { value: this.timeProcess, name: '已完成' },
                { value: 100 - this.timeProcess, name: '未完成' },
              ]
            }
          ]
        };
        chart.setOption(options, true);
        return chart;
      },
      initChart3(canvas, width, height) {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height
        })
        canvas.setChart(chart);
        this.chart3 = chart;
        return chart;
      },
      async init(){
        wx.showLoading();
        const totalBonusResult = await wx.request({
          url: '/bg/finance/report/totalBonus'
        })
        this.totalBonus = totalBonusResult;
        const result = await wx.request({
          url: '/bg/finance/report/salesReport',
          data: {
            startTime: timeFormat.fetch(Date.now(), '{YYYY}-{MM}-01 00:00:00'),
            endTime: timeFormat.fetch(Date.now(), '{YYYY}-{MM}-31 23:59:59'),
          }
        })
        if (result.code === 200) {
          this.financeData = result.data[ 0 ];
        } else {
          wx.showToast(result.message);
        }
        const taskResult = await wx.request({
          url: '/bg/finance/report/getTotalTaskAmount',
          data: {
            startTime: timeFormat.fetch(Date.now(), '{YYYY}-{MM}-01 00:00:00'),
            endTime: timeFormat.fetch(Date.now(), '{YYYY}-{MM}-31 23:59:59'),
          }
        })
        if (taskResult.code === 200) {
          this.totalTaskAmount = parseInt(taskResult.data || 0);
        } else {
          wx.showToast(taskResult.message);
        }
        const adResult = await wx.request({
          url: '/bg/finance/report/getTotalAdCost',
          data: {
            startTime: timeFormat.fetch(Date.now(), '{YYYY}-{MM}-01 00:00:00'),
            endTime: timeFormat.fetch(Date.now(), '{YYYY}-{MM}-31 23:59:59'),
          }
        })
        wx.hideLoading();
        if (adResult.code === 200) {
          this.totalAdCost = adResult.data;
          this.totalAdCode = parseFloat(this.totalAdCost == 0 ? 0 : (this.financeData.newOrderAmount + this.financeData.rebuyOrderAmount)/this.totalAdCost).toFixed(2);
        } else {
          this.$message.error(result.message);
        }

        this.taskProcess = parseFloat((this.financeData.newOrderAmount + this.financeData.rebuyOrderAmount) / this.totalTaskAmount * 100).toFixed(1) - 0;
        const options = {
          color: [new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              {offset: 0, color: '#9CE9DE'},
              {offset: 1, color: '#14D2B8'}
            ]
          ), '#E0E4EB'],
          series: [
            {
              name: '完成率',
              type: 'pie',
              radius: [ '80%', '100%' ],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [
                { value: this.taskProcess, name: '已完成' },
                { value: 100 - this.taskProcess, name: '未完成' },
              ]
            }
          ]
        };
        this.$nextTick(() => {
          if(this.chart1){
            this.chart1.setOption(options, true);
          }else{
            setTimeout(() => {
              this.chart1.setOption(options, true);
            }, 1000)
          }
        })
        this.newOrderProcess = parseFloat(this.financeData.newOrderNum / (this.financeData.newOrderNum + this.financeData.rebuyOrderNum) * 100).toFixed(1) - 0;
        const orderOptions = {
          color: [new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              {offset: 0, color: '#CAC4FF'},
              {offset: 1, color: '#6E5EFF'}
            ]
          ),'#E0E4EB'],
          series: [
            {
              name: '新单占比',
              type: 'pie',
              radius: [ '80%', '100%' ],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [
                { value: this.newOrderProcess, name: '已完成' },
                { value: 100 - this.newOrderProcess, name: '未完成' },
              ]
            }
          ]
        };
        if(this.chart3){
          this.chart3.setOption(orderOptions, true);
        }else{
          setTimeout(() => {
            this.chart3.setOption(orderOptions, true);
          }, 1000)
        }
        const orgRankReportData = await wx.request({
          url: "/bg/sales/report/orgRankReport",
          data: {
            startTime: timeFormat.fetch(Date.now(), "{YYYY}-{MM}-01 00:00:00"),
            endTime: timeFormat.fetch(Date.now(), "{YYYY}-{MM}-31 23:59:59")
          }
        });
        let delayShipOrderAmount = 0;
        if(orgRankReportData.code === 200){
          orgRankReportData.data.forEach( data => {
            delayShipOrderAmount +=  parseInt(data.delayShipOrderAmount);
          })
          this.delayShipOrderAmount = delayShipOrderAmount;
        }
      }
    }
  };
</script>

<style lang="scss">
  @import "../../../styles/base";
  .overview-admin {
    .module-title {
      display: flex;
      align-items: center;
      padding-left: pxToRem(20);
      .title {
        font-size: pxToRem(36);
        margin-left: pxToRem(10);
        margin-right: pxToRem(10);
      }
      .line {
        width: pxToRem(20);
        height: pxToRem(4);
        background: linear-gradient(90deg, rgba(117, 228, 252, 1) 0%, rgba(68, 189, 245, 1) 100%);
      }
    }
    .chart-list {
      display: flex;
      align-items: center;
      margin: pxToRem(20) auto;
      padding: pxToRem(40);
      width: pxToRem(710);
      height: pxToRem(300);
      box-shadow:0 0 pxToRem(20) 0 rgba(59,74,116,0.14);
      border-radius: pxToRem(40);
      justify-content: space-between;
      box-sizing: border-box;
      .chart {
        padding-top: pxToRem(5);
        width: pxToRem(168);
        height: pxToRem(220);
        text-align: center;
        .canvas {
          display: block;
          margin-left: auto;
          margin-right: auto;
          width: pxToRem(160);
          height: pxToRem(160);
        }
        .title {
          padding-top: pxToRem(10);
          font-size: pxToRem(28);
          line-height: pxToRem(40);
          color: #140F26;
          text-align: center;
        }
      }
    }
  }
</style>
